<template>
    <div class="coupon_history">
        <el-table :data="lists" border style="width: 100%" :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ 'text-align': 'center' }">
            <el-table-column prop="name" label="名称"></el-table-column>
            <el-table-column prop="type" label="优惠券类型" :formatter="formatterType"></el-table-column>
            <el-table-column prop="useType" label="可使用商品" :formatter="formatterUseType"></el-table-column>
            <el-table-column prop="minPoint" label="使用门槛">
                <template #default="{ row }">
                    <p>满{{ row.minPoint }}元可用</p>
                </template>
            </el-table-column>
            <el-table-column prop="amount" label="面值">
                <template #default="{ row }">
                    <p>{{ row.amount }}元</p>
                </template>
            </el-table-column>
            <el-table-column label="状态">{{ useZhuangTai }}
            </el-table-column>
        </el-table>
        <el-table :data="lists" border style="width: 100%" :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ 'text-align': 'center' }">
            <el-table-column prop="enableTime endTime" label="有效期">
                <template #default="{ row }">
                    {{ formateTime(row.enableTime) }}至{{ formateTime(row.endTime) }}
                </template>
            </el-table-column>
            <el-table-column prop="publishCount" label="总发行量"></el-table-column>
            <el-table-column prop="receiveCount" label="已领取"></el-table-column>
            <el-table-column prop="count" label="待领取"></el-table-column>
            <el-table-column prop="useCount" label="已使用"></el-table-column>
            <el-table-column prop="publishCount" label="未使用"></el-table-column>
        </el-table>
        <!-- 顶部搜索部分 -->
        <div class="search_box">
            <el-row>
                <!-- 左边标题 -->
                <el-col :span="21" class="left_search">
                    <el-icon :size="20" color="#444545">
                        <Search />
                    </el-icon>
                    <span>筛选搜索</span>
                </el-col>
                <!-- 右边按钮 -->
                <el-col :span="3" class="right_search">
                    <el-button @click=resetFn>重置</el-button>
                    <el-button type="primary" @click="fetch">查询搜索</el-button>
                </el-col>
            </el-row>
            <div class="coupon_input">
                <el-row class="input_search">
                    <span>使用状态：</span>
                    <!-- <el-input autocomplete="false" placeholder="优惠券名称" @keyup.enter="requestTableData"
                    v-model="queryParams.keyword" /> -->
                    <el-select placeholder="全部" v-model="searchParams.useStatus">
                        <el-option v-for="item in useStatusOptions" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>

                </el-row>
                <el-row class="input_search">
                    <span>订单编号：</span>
                    <el-input v-model="searchParams.orderSn" autocomplete="false" placeholder="订单编号" />
                </el-row>
            </div>
        </div>
        <el-table :data="list" border style="width: 100%" :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ 'text-align': 'center' }">
            <el-table-column prop="couponCode" label="优惠码" width="160"></el-table-column>
            <el-table-column prop="memberNickname" label="领取会员"></el-table-column>
            <!-- ??????? -->
            <el-table-column prop="memberId" label="领取方式">
                主动获取
            </el-table-column>
            <el-table-column prop="createTime" label="领取时间" width="180">
                <template #default="{ row }">
                    {{ formateTime(row.createTime) }}
                </template>
            </el-table-column>
            <!-- ????? -->
            <el-table-column label="当前状态">{{ useZhuangTai }}
            </el-table-column>
            <el-table-column label="使用时间"></el-table-column>
            <el-table-column label="订单编号">NAN</el-table-column>
        </el-table>
        <!-- 分页 -->
        <PaginationTwo v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
            :total="total" />
    </div>
</template>
<script setup lang='ts'>
import { ApiCouponHistoryList, ApiGetCouponId } from "@/http/api"
import useTable from '@/hooks/useTable'
import PaginationTwo from '@/components/Pagination/PaginationTwo.vue'
import { reactive, ref } from "vue"
import { formateTime } from '@/utils/index'
import { useRoute } from "vue-router"
import { Search } from '@element-plus/icons-vue'

// 分页
const route = useRoute();
const searchParams = reactive({
    couponId: route.query.id,
    orderSn: '',
    useStatus: ''
})
const { list, pageNum, pageSize, total, fetch } = useTable(ApiCouponHistoryList, searchParams)
// 查询
const lists = reactive([])

ApiGetCouponId(route.query.id).then(res => {
    if (res.code === 200) {
        lists.push(res.data)
    }
})
// 优惠券类型
const formatterType = (row: any) => {
    if (row.type == 0) {
        return "全场赠券"
    } else if (row.type == 1) {
        return "会员赠券"
    } else if (row.type == 2) {
        return "购物赠券"
    } else if (row.type == 3) {
        return "注册赠券"
    }
}
// 可使用商品
const formatterUseType = (row: any) => {
    if (row.useType == 0) {
        return "全场通用"
    } else if (row.useType == 1) {
        return "指定分类"
    } else if (row.useType == 2) {
        return "指定商品"
    }
}
// 使用状态
const useZhuangTai = ref('')
const useStatusOptions = [
    {
        value: 0,
        label: '未使用',
    },
    {
        value: 1,
        label: '已使用',
    },
    {
        value: 2,
        label: '已过期',
    },
]
// 遍历一下使用状态
useStatusOptions.forEach(item => {
    useZhuangTai.value = item.label
})
// 重置
const resetFn = () => {
    searchParams.orderSn = '';
    searchParams.useStatus = '';
    fetch();
}
</script>
<style lang="less" scoped>
// 顶部搜索部分
.search_box {
    padding: 20px;
    // box-shadow: 0 0 4px 2px #eee;
    border: 1px solid #eee;
    margin-bottom: 20px;
    margin-top: 20px;
    border-radius: 2px;
    // 二十四、将搜索框部分粘性定位到顶部
    // position: sticky;
    top: -20px;

    // z-index: 2;
    // background-color: rgba(255, 255, 255, 0.9);
    .left_search {
        display: flex;
        align-items: center;
    }

    // 右边按钮
    .right_search {
        display: flex;
        align-items: center;
        justify-content: right;
    }

    .coupon_input {
        display: flex;
        align-items: center;
    }

    .input_search {
        display: flex;
        align-items: center;

        span {
            font-size: 14px;
            color: #606266;
            margin-left: 30px;
        }

        .el-input {
            width: 200px;
        }
    }
}

.coupon_history {
    margin: 50px 120px 0;
}
</style>